import React, { useEffect, useState } from "react";
import "./app.css";
import Header from "./Header";
import List from "./List";
import Footer from "./Footer";
import {nanoid }from "nanoid"
export default function () {
  const [todoList, setTodoList] = useState([])

  // 查看本地存储的数据
  useEffect(() => {
    setTodoList(JSON.parse(localStorage.getItem("todoList") || [] ))
  },[])

  // // todoList 发送改变就保存到本地存储中
  useEffect(() => {
    localStorage.setItem("todoList",JSON.stringify(todoList))
  },[todoList])
  return (
    <div>
      <div className="todo-container">
        <div className="todo-wrap">
          <Header setTodoList = {setTodoList} todoList = {todoList}/>
          <List todoList={todoList} setTodoList = {setTodoList}/>
          <Footer todoList={todoList} setTodoList = {setTodoList}/>
        </div>
      </div>
    </div>
  );
}
